<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #main {
        position: relative;
    }

    img {
        width: 400px;
        height: 400px;
    }

    .introduce {
        position: absolute;
        top: 2vh;
        left: 40vw;
    }

    .moneynow {
        color: #E4393C;
    }

    .introduce p {
        margin-top: 40px;
    }
</style>

<body>
    <!-- 写一个详情页，来个倒计时，要求在倒计时1小时外，6折，在倒计时一小时1小时内，每10分钟折扣上升0.5，把价格计算出来,最好把计算属性与方法都用上，不需要讨论合理不合理 -->
    <div id="main">
        <img src="./phone.jpg" alt="">
        <div class="introduce">
            <p><span>商品名：{{name|Name}}</span></p>
            <p><span class="money">价格：{{money|Price}}</span></p>
            <p><span class="moneynow">秒杀价：{{moneynow|PriceNow}}</span></p>
            <p>倒计时：<span id="time">{{getTime}}</span></p>
        </div>

    </div>
</body>
<script>
    let vm = new Vue({
        el: '#main',
        data: {
            name: 'vivo X60t Pro+',
            money: 3600,
            moneynow: ''
        },
        filters: {
            Name: function (value) {
                return value
            },
            Price: function (value) {
                return '￥' + value
            },
            PriceNow: function (value) {
                return '￥' + value
            }
        },
        computed: {
            getTime: function () {
                let that = this;
                setInterval(function () {
                    let NowDate = new Date();
                    let EndDate = new Date('2022/04/07,24:00');
                    var time = (EndDate.getTime() - NowDate.getTime()) / 1000;
                    var d = parseInt(time / (60 * 60 * 24));
                    var h = parseInt(time / 60 / 60 % 24);
                    var m = parseInt(time / 60 % 60);
                    var s = parseInt(time % 60);
                    let dateTime = d + "天" + h + "小时" + m + "分钟" + s + "秒";
                    let time2 = document.getElementById('time').innerHTML = dateTime

                    if (h >= 1) {
                        that.moneynow = that.money * 0.6;
                    } else {
                        switch (parseInt(m / 10)) {
                            case 5:
                                that.moneynow = that.money * (0.6 + 0.05)
                                break;
                            case 4:
                                that.moneynow = that.money * (0.6 + (0.05 * 2))
                                break;
                            case 3:
                                that.moneynow = that.money * (0.6 + (0.05 * 3))
                                break;
                            case 2:
                                that.moneynow = that.money * (0.6 + (0.05 * 4))
                                break;
                            case 1:
                                that.moneynow = that.money * (0.6 + (0.05 * 5))
                                break;
                            default:
                                that.moneynow = that.money * (0.6 + (0.05 * 6))
                                break;
                        }
                    }
                    return time2;
                }, 1000)
            },
        }
    })
</script>

</html>